<template>
  <div>
    <!-- tab栏 -->
    <div class="tabbar">
      <!-- 最小化状态 -->
      <div class="cursong" @click="opensong">
        <span class="songimg"><i class="iconfont">&#xe618;</i></span>
       
        <p class="songname"></p>
        <span class="playing"></span>
      </div>
      <!-- 播放页面 -->
      <div class="playpage">

        <nut-popup :style="{ height:'90%',width:'100%',margin:'0 0 -20px 0' }" v-model="this.$store.state.tabbar.songshow">正文</nut-popup>
      </div>
      <div class="tabs">
        <span :class="{'curtab':this.$store.state.tabbar.tabs.music}" @click="tabschange('music')">
          <i class="iconfont">&#xe618;</i>
          <p>音乐</p>
        </span>
        <span :class="{'curtab':this.$store.state.tabbar.tabs.my}" @click="tabschange('my')">
          <i class="iconfont">&#xe62b;</i>
          <p>我的</p>
        </span>
        <span :class="{'curtab':this.$store.state.tabbar.tabs.video}" @click="tabschange('video')">
          <i class="iconfont">&#xe617;</i>
          <p>MV</p>
        </span>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
    };
  },
  components:{
   
  },
  mounted(){
  },
  methods: {
    //  tab栏的变化
    tabschange(tab) {
      this.$store.commit("settabs",tab)
      this.$router.push({name:tab})
    },
    //  打开歌曲页面
    opensong(){
      this.$store.commit("setsongshow",true)
      console.log(this.$store.state.tabbar.songshow)
    },
  }
};
</script>
<style scoped>
/* 底部tab栏 */
.tabbar {
  width: 375px;
  height: 100px;
  position: fixed;
  bottom: 0;
  background-color: #f6f6f6;
}
.tabbar .cursong {
  width: 375px;
  height: 40px;
  background-color: #f6f6f6;
  position: relative;
}
.tabbar .songimg {
  position: absolute;
  top: -20px;
  left: 20px;
  display: inline-block;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid #fc386b;
}
.tabbar .songimg i {
  font-size: 50px;
  color: #fc386b;
}
.tabbar .tabs .curtab {
  color: #fc386b;
}
.tabbar .tabs {
  display: flex;
}
.tabbar .tabs i {
  display: inline-block;
  width: 125px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  line-height: 40px;
}
.tabbar .tabs p {
  text-align: center;
  font-size: 14px;
}
/* 歌曲弹出层页面 */
.popup-box {
  position: fixed;
  bottom: -20px;
}
</style>